<template>
  <view class="order-container">
    <!-- 顶部导航 -->
    <view class="order-header">
      <uni-icons type="arrowleft" size="24" color="#333" @click="goBack"></uni-icons>
      <text class="header-title">我的订单</text>
      <view class="header-actions">
        <uni-icons type="search" size="24" color="#666"></uni-icons>
      </view>
    </view>

    <!-- 订单状态标签 -->
    <view class="order-tabs">
      <scroll-view scroll-x class="tab-scroll">
        <view
            v-for="(tab, index) in tabs"
            :key="index"
            :class="['tab-item', activeTab === tab.type ? 'active' : '']"
            @click="switchTab(tab.type)"
        >
          {{ tab.name }}
          <view class="tab-indicator" v-if="activeTab === tab.type"></view>
        </view>
      </scroll-view>
    </view>

    <!-- 订单列表 -->
    <scroll-view scroll-y class="order-list">
      <view class="empty-order" v-if="filteredOrders.length === 0">
        <image src="/static/order/empty-order.png" class="empty-image"></image>
        <text class="empty-text">暂无相关订单</text>
        <button class="browse-btn" @click="goToHome">去逛逛</button>
      </view>

      <view v-else>
        <view
            v-for="order in filteredOrders"
            :key="order.id"
            class="order-item"
        >
          <view class="order-header">
            <text class="order-number">订单号：{{ order.orderNumber }}</text>
            <text class="order-status">{{ getStatusText(order.status) }}</text>
          </view>

          <view class="order-content">
            <view class="product-info">
              <image :src="order.product.image" class="product-image"></image>
              <view class="product-detail">
                <text class="product-name">{{ order.product.name }}</text>
                <text class="product-sku">{{ order.product.sku }}</text>
                <text class="product-price">¥{{ order.product.price }}</text>
              </view>
            </view>

            <view class="order-meta">
              <text class="meta-item">共{{ order.product.quantity }}件商品</text>
              <text class="meta-item">实付：¥{{ order.totalAmount }}</text>
            </view>
          </view>

          <view class="order-footer">
            <text class="order-time">{{ order.createTime }}</text>
            <view class="order-actions">
              <button
                  v-for="action in getActions(order.status)"
                  :key="action.type"
                  :class="['action-btn', action.type]"
                  @click="handleAction(action.type, order.id)"
              >
                {{ action.text }}
              </button>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';

// 订单标签
const tabs = ref([
  { type: 'all', name: '全部' },
  { type: 'pendingPayment', name: '待付款' },
  { type: 'pendingDelivery', name: '待发货' },
  { type: 'pendingReceipt', name: '待收货' },
  { type: 'pendingReview', name: '待评价' },
  { type: 'completed', name: '已完成' }
]);

const activeTab = ref('all');

// 订单数据
const orders = ref([
  {
    id: 'O20230701001',
    orderNumber: '202307010001',
    status: 'pendingPayment',
    createTime: '2023-07-01 14:30:22',
    totalAmount: 120.00,
    product: {
      id: 'P001',
      name: '速干王胶水',
      sku: '经典-速干王(1大瓶)',
      price: 120.00,
      quantity: 1,
      image: '/static/goods/glue1.jpg'
    }
  },
  {
    id: 'O20230701002',
    orderNumber: '202307010002',
    status: 'pendingDelivery',
    createTime: '2023-07-01 10:15:36',
    totalAmount: 180.00,
    product: {
      id: 'P002',
      name: '山茶花睫毛',
      sku: '0.05圆毛/多根/开花',
      price: 65.00,
      quantity: 2,
      image: '/static/goods/eyelash1.jpg'
    }
  },
  {
    id: 'O20230628001',
    orderNumber: '202306280001',
    status: 'pendingReceipt',
    createTime: '2023-06-28 16:45:12',
    totalAmount: 230.00,
    product: {
      id: 'P003',
      name: '专业镊子套装',
      sku: '精密工艺 防滑设计',
      price: 88.00,
      quantity: 1,
      image: '/static/goods/tweezers.jpg'
    }
  },
  {
    id: 'O20230625001',
    orderNumber: '202306250001',
    status: 'pendingReview',
    createTime: '2023-06-25 09:22:45',
    totalAmount: 78.00,
    product: {
      id: 'P004',
      name: '上妆液',
      sku: '高效补水锁湿',
      price: 78.00,
      quantity: 1,
      image: '/static/goods/liquid1.jpg'
    }
  },
  {
    id: 'O20230620001',
    orderNumber: '202306200001',
    status: 'completed',
    createTime: '2023-06-20 11:05:33',
    totalAmount: 45.00,
    product: {
      id: 'P005',
      name: '婴儿弯睫毛',
      sku: '国风L婴儿弯睫毛',
      price: 45.00,
      quantity: 1,
      image: '/static/goods/eyelash3.jpg'
    }
  }
]);

// 过滤后的订单
const filteredOrders = computed(() => {
  if (activeTab.value === 'all') {
    return orders.value;
  }
  return orders.value.filter(order => order.status === activeTab.value);
});

// 切换标签
const switchTab = (type) => {
  activeTab.value = type;
};

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    pendingPayment: '待付款',
    pendingDelivery: '待发货',
    pendingReceipt: '待收货',
    pendingReview: '待评价',
    completed: '已完成'
  };
  return statusMap[status] || '';
};

// 获取操作按钮
const getActions = (status) => {
  const actionsMap = {
    pendingPayment: [
      { type: 'cancel', text: '取消订单' },
      { type: 'pay', text: '立即支付' }
    ],
    pendingDelivery: [
      { type: 'remind', text: '提醒发货' }
    ],
    pendingReceipt: [
      { type: 'viewLogistics', text: '查看物流' },
      { type: 'confirm', text: '确认收货' }
    ],
    pendingReview: [
      { type: 'review', text: '评价' },
      { type: 'delete', text: '删除订单' }
    ],
    completed: [
      { type: 'delete', text: '删除订单' },
      { type: 'buyAgain', text: '再次购买' }
    ]
  };
  return actionsMap[status] || [];
};

// 处理操作
const handleAction = (type, orderId) => {
  console.log(`执行操作: ${type}, 订单ID: ${orderId}`);
  switch (type) {
    case 'pay':
      uni.navigateTo({ url: `/pages/order/payment?id=${orderId}` });
      break;
    case 'confirm':
      uni.showModal({
        title: '确认收货',
        content: '确认收到商品吗？',
        success: (res) => {
          if (res.confirm) {
            // 更新订单状态
            const order = orders.value.find(o => o.id === orderId);
            if (order) order.status = 'pendingReview';
          }
        }
      });
      break;
    case 'review':
      uni.navigateTo({ url: `/pages/order/review?id=${orderId}` });
      break;
    case 'delete':
      uni.showModal({
        title: '删除订单',
        content: '确定要删除此订单吗？',
        success: (res) => {
          if (res.confirm) {
            orders.value = orders.value.filter(o => o.id !== orderId);
          }
        }
      });
      break;
  }
};

const goBack = () => {
  uni.navigateBack();
};

const goToHome = () => {
  uni.switchTab({ url: '/pages/index/index' });
};
</script>

<style lang="scss" scoped>
.order-container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.order-header {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 10;

  .header-title {
    flex: 1;
    text-align: center;
    font-size: 34rpx;
    font-weight: 600;
  }

  .header-actions {
    width: 60rpx;
    text-align: right;
  }
}

.order-tabs {
  background-color: #fff;
  padding: 0 30rpx;
  position: sticky;
  top: 80rpx;
  z-index: 10;

  .tab-scroll {
    white-space: nowrap;
    padding: 20rpx 0;
  }

  .tab-item {
    display: inline-block;
    padding: 0 30rpx;
    font-size: 30rpx;
    color: #666;
    position: relative;

    &.active {
      color: #e54d42;
      font-weight: 600;
    }

    .tab-indicator {
      position: absolute;
      bottom: -10rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 40rpx;
      height: 6rpx;
      background-color: #e54d42;
      border-radius: 3rpx;
    }
  }
}

.order-list {
  height: calc(100vh - 180rpx);
  padding: 20rpx;
}

.empty-order {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 70vh;

  .empty-image {
    width: 280rpx;
    height: 280rpx;
    margin-bottom: 40rpx;
  }

  .empty-text {
    font-size: 32rpx;
    color: #999;
    margin-bottom: 40rpx;
  }

  .browse-btn {
    width: 240rpx;
    height: 80rpx;
    line-height: 80rpx;
    background: linear-gradient(90deg, #e54d42, #ff6b6b);
    color: white;
    border-radius: 40rpx;
    font-size: 30rpx;
  }
}

.order-item {
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    border-bottom: 1rpx solid #f0f0f0;

    .order-number {
      font-size: 26rpx;
      color: #666;
    }

    .order-status {
      font-size: 28rpx;
      color: #e54d42;
      font-weight: 600;
    }
  }

  .order-content {
    padding: 20rpx;

    .product-info {
      display: flex;
      margin-bottom: 20rpx;

      .product-image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 12rpx;
        margin-right: 20rpx;
      }

      .product-detail {
        flex: 1;
        display: flex;
        flex-direction: column;

        .product-name {
          font-size: 30rpx;
          font-weight: 500;
          margin-bottom: 10rpx;
        }

        .product-sku {
          font-size: 26rpx;
          color: #999;
          margin-bottom: 10rpx;
        }

        .product-price {
          font-size: 28rpx;
          color: #e54d42;
          font-weight: 600;
        }
      }
    }

    .order-meta {
      display: flex;
      justify-content: flex-end;
      font-size: 26rpx;
      color: #666;

      .meta-item {
        margin-left: 30rpx;
      }
    }
  }

  .order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;
    border-top: 1rpx solid #f0f0f0;

    .order-time {
      font-size: 26rpx;
      color: #999;
    }

    .order-actions {
      display: flex;

      .action-btn {
        height: 60rpx;
        line-height: 60rpx;
        padding: 0 30rpx;
        border-radius: 30rpx;
        font-size: 26rpx;
        margin-left: 20rpx;
        background-color: #fff;
        border: 1rpx solid #ddd;

        &.pay {
          background-color: #e54d42;
          color: white;
          border: none;
        }
      }
    }
  }
}
</style>